<template>
  <view class="outer">
    <uni-grid :column="responsiveColumn" @change="handleChoice">
      <uni-grid-item
        v-for="(item, index) in options"
        :key="index"
        :index="index"
        class="gird-item"
        :showBorder="false"
      >
        <view class="option">
          <view
            :style="{
              border: current !== index ? '' : '3rpx solid #3499CC',
              color: current !== index ? '' : '#3499CC',
            }"
            :class="{
              'inner-option': true,
              'show-animation': showAni && current === index,
            }"
            @animationed="reset"
          >
            <view class="option-header">{{ alphaBet[index] }}</view>
            <view class="option-content">{{ item.content }}</view>
          </view>
        </view>
      </uni-grid-item>
    </uni-grid>
  </view>
</template>

<script>
export default {
  name: "multi-choice",
  props: {
    options: Array,
  },
  data() {
    return {
      alphaBet: ["A", "B", "C", "D", "E", "F", "G"],
      current: undefined,
      showAni: false,
    };
  },
  computed: {
    responsiveColumn() {
      switch (this.$props.options.length) {
        case 2:
        case 4:
          return 2;
        case 6:
        case 3:
          return 3;
        default:
          return 4;
      }
    },
  },
  methods: {
    handleChoice(e) {
      this.current = e.detail.index;
      this.showAni = true;
      this.$emit("choose", e.detail.index);
    },
    reset() {
      this.showAni = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.gird-item {
  position: relative;
}

.card {
  width: 100%;
}

.option {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .inner-option {
    width: 80%;
    height: 80%;
    position: relative;

    display: flex;
    flex-direction: column;
    border-radius: 10rpx;
    box-shadow: 0 0 50rpx 0.2rpx rgb(225, 225, 225);
    transition: border 0.5s;

    .option-header {
      width: 100%;
      padding: 10rpx;
      display: flex;
      justify-content: center;
      font-size: 40rpx;
    }
    .option-content {
      width: 100%;
      flex-grow: 1;
      padding: 20rpx;
      display: flex;
      justify-content: center;
    }
  }
}

.show-animation {
  animation: wave 0.3s ease-in-out;
}

.outer {
  height: 100%;
  width: 100%;
}

@keyframes wave {
  0% {
    background-color: white;
  }

  20% {
    background-color: #8eb5c9;
  }

  100% {
    background-color: white;
  }
}
</style>
